<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 15:58:47
 * @LastEditors: yuxi
 * @LastEditTime: 2022-10-28 15:44:58
-->
<template>
  <div class="style-control">
    <el-form ref="form" :model="form" label-width="90px" size="mini">
      <!-- 点图层 -->
      <el-form-item v-if="styleType.indexOf('point') >= 0" label="图标">
        <el-popover
          placement="top-start"
          title="选择图标"
          width="200"
          trigger="hover"
          popper-class="select-icon-popover"
          ref="iconPopup"
        >
          <!-- <img
            slot="reference"
            class="select-icon"
            :src="form.image_src"
            alt=""
          /> -->
          <div
            slot="reference"
            class="select-icon"
            :style="{ backgroundImage: `url(${form.image_src})` }"
          ></div>
          <div class="select-icon-warpper">
            <div
              class="select-icon"
              v-for="icon in Icons"
              :key="icon.name"
              :style="{ backgroundImage: `url(${icon.src})` }"
              @click="handleSelectIcon(icon.src)"
            ></div>
          </div>
        </el-popover>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('point') >= 0" label="缩放比例">
        <el-input v-model="form.image_scale"></el-input>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('point') >= 0" label="对齐方式">
        <!-- x:<el-input v-model="form.anchor[0]" type="number"></el-input>
        y:<el-input v-model="form.anchor[1]" type="number"></el-input> -->
        <el-select v-model="form.image_anchor" placeholder="请选择">
          <el-option label="顶部" value="[0.5,0]"></el-option>
          <el-option label="底部" value="[0.5,1]"></el-option>
          <el-option label="中间" value="[0.5,0.5]"></el-option>
          <el-option label="左上" value="[0,0]"></el-option>
          <el-option label="左中" value="[0,0.5]"></el-option>
          <el-option label="左下" value="[0,1]"></el-option>
          <el-option label="右上" value="[1,0]"></el-option>
          <el-option label="右中" value="[1,0.5]"></el-option>
          <el-option label="右下" value="[1,1]"></el-option>
        </el-select>
      </el-form-item>
      <!-- 线图层 -->
      <el-form-item v-if="styleType.indexOf('line') >= 0" label="线颜色">
        <el-color-picker v-model="form.stroke_color"></el-color-picker>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('line') >= 0" label="线端点类型">
        <el-select v-model="form.stroke_lineCap" placeholder="请选择">
          <el-option label="butt" value="butt"></el-option>
          <el-option label="round" value="round"></el-option>
          <el-option label="square" value="square"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('line') >= 0" label="线拐点类型">
        <el-select v-model="form.stroke_lineJoin" placeholder="请选择">
          <el-option label="bevel" value="bevel"></el-option>
          <el-option label="round" value="round"></el-option>
          <el-option label="miter" value="miter"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('line') >= 0" label="虚线间距">
        <el-select v-model="form.stroke_lineDash" placeholder="请选择">
          <el-option label="无" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="styleType.indexOf('line') >= 0" label="线宽">
        <el-input v-model="form.stroke_width" type="number"></el-input>
      </el-form-item>

      <el-form-item size="mini" label-width="0px" style="text-align: center">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import commonMixin from '../mixins/base.js'
import { MiningStyle } from '../Style'
import { DefaultStyle } from '../Config';
import { Icons } from '../Config/DefaultStyle'

function toForm(json) {
  let form = {}
  for(var i in json) {
    for(var j in json[i]) {
      form[i + '_' + j] = json[i][j]
    }
  }
  return form

}
function fromForm(form) {
  let json = {}
  for(var i in form) {
    let keys = i.split('_')
    json[keys[0]] = json[keys[0]] || {}
    json[keys[0]][keys[1]] = form[i]
  }
  return json
}
export default {
  name: 'MiningStyleControl',
  components: {
  },
  mixins: [commonMixin('control')],
  props: {
    defaultStyle: {
      type: Object,
      default () {
        return null
      }
    }
  },
  computed: {

  },
  data () {
    return {
      // form: JSON.parse(JSON.stringify(DefaultStyle))
      form: toForm(DefaultStyle),
      styleType: ['point', 'line', 'polygon'],
      Icons: Icons // 默认图标
    }
  },
  watch : {
    defaultStyle: {
      immediate: true,
      handler(){
        this.setData()
      }
    },
    form: {
      deep: true,
      handler () {
        console.log(this.form)
      }
    }
  },
  methods: {
    load () {
      // const { map } = this
      
    }, 
    setData () {
      if(this.defaultStyle) {

        let styleJson = this.defaultStyle.toJSON()

        let styleForm = toForm(styleJson)
        let defaultForm = toForm(DefaultStyle)

        console.log('style ', styleJson, styleForm)

        if(styleJson) {
          this.styleType = []
          if(styleJson.image) {
            this.styleType.push('point')
            // 点
          }
           if (styleJson.stroke) {
            // 线
            this.styleType.push('line')
             
          } 
           if (styleJson.fill) {
            // 线
            this.styleType.push('polygon')
             
          }

           
        }
        else  {
          // 设置默认
          this.styleType = ['point', 'line', 'polygon']

        }

        for(var i in this.form) {
            if(styleForm[i]) {
              this.form[i]= styleForm[i] || defaultForm[i]
              if(i === 'stroke_lineDash'  && this.form[i]) {
                if(this.form[i].length === 0) {
                  this.form[i] = '0'
                } else {
                  this.form[i] =  this.form[i][0] + '' 
                }
              } 

              if(i === 'image_anchor'  && this.form[i]) {
                if(this.form[i].length === 2) {
                  this.form[i] =  JSON.stringify(this.form[i])
                } else {
                  this.form[i] =  this.form[i][0] + '' 
                }
              } 
            } else {
              this.form[i] = defaultForm[i]
            }
          }
        console.log(this.form)
      }
    },
    getData () {
      let data = {}
      for(var i in this.form) {
        if(this.styleType.indexOf('point') >= 0 && i.indexOf('image') === 0) {
          if(i === 'image_anchor') {  
            // data['image_anchor'] = 
            if(this.form['image_anchor']) {
              data['image_anchor'] = JSON.parse(this.form['image_anchor'])
              data['image_anchorXUnits'] = 'fraction'
              data['image_anchorYUnits'] = 'fraction'

            }
          } else {
            data[i] = this.form[i]
          }
          data['image_anchorXUnits'] = 'fraction'
          data['image_anchorYUnits'] = 'fraction'
        } else if (this.styleType.indexOf('line') >= 0 && i.indexOf('stroke') === 0) { 
          data[i] = data[i] || {}
          if(i === 'stroke_lineDash') {
            if(this.form[i] === '0') {
              data[i] = []
            } else {
              data[i] = [parseInt(this.form[i] || '0')]
            }
          } else {
            data[i] = this.form[i]
          }
        }
        
      }
      return data
    },
    handleSubmit () {
      console.log('submit ', fromForm(this.form))
      let style = new MiningStyle()
      style.fromJSON(fromForm(this.getData(this.form)))
      console.log('new Style is ', style)
      this.$emit('submit', style)
    },
    handleCancel () {
      this.$emit('cancel')
    },
    // 选择图标
    handleSelectIcon(src){
      this.form.image_src = src
    }
  }
}
</script>
  
<style lang="less" scoped>
.style-control {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 200px;
  min-height: 200px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /deep/ .el-form-item__label {
    font-size: 12px;
  }
  .select-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    border: 1px solid transparent;
  }
}
</style>
<style lang="less">
.select-icon-popover {
  .select-icon-warpper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .select-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid #999;
    }
  }
}
</style>